<template>
  <page-container title="基本资料">
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      class="profile-form"
      :rules="rules">
      <el-form-item label="登录名称">
        <el-input
          v-model="form.username"
          placeholder="请输入登录名称"
          disabled
          class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input
          v-model="form.nickname"
          placeholder="请输入用户昵称"
          class="form-input"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input
          v-model="form.email"
          placeholder="请输入用户邮箱"
          type="email"
          class="form-input"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交修改</el-button>
      </el-form-item>
    </el-form>
  </page-container>
</template>

<script>
import PageContainer from '@/components/PageContainer.vue'
export default {
  components: { PageContainer },
  name: 'UserProfile',
  data () {
    return {
      form: {
        username: 'admin',
        nickname: 'admin',
        email: 'admin@163.com'
      },
      rules: {
        nickname: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入用户邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交表单逻辑
          console.log('提交的数据:', this.form)
        }
      })
    }
  }
}
</script>

<style scoped>
.profile-form {
  width: 100%; /* 表单占满宽度 */
}
.form-input {
  width: 100%; /* 输入框占满宽度 */
}
.el-form-item__label {
  color: #303133;
}
.el-form-item.is-required .el-form-item__label::before {
  content: '*';
  color: #f5222d;
  margin-right: 4px;
}
</style>
